<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }
      .content div {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="title">
        <button class="active">math</button>
        <button>chinese</button>
        <button>english</button>
      </div>
      <div class="content">
        <div style="display: block">数学</div>
        <div>语文</div>
        <div>英语</div>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
      $(function () {
        var index = 0; //全局
        $(".title button").on("click", function () {
          $(this).addClass("active").siblings().removeClass("active");
          index = $(this).index();
          $(".content div").eq(index).show().siblings().hide();
        });

        var timer = setInterval(function () {
          index++;
          if (index >= 3) {
            index = 0;
          }
          $(".title button")
            .eq(index)
            .addClass("active")
            .siblings()
            .removeClass("active");
          $(".content div").eq(index).show().siblings().hide();
        }, 1000);

        $(".container").hover(
          function () {
            clearInterval(timer);
          },
          function () {
            timer = setInterval(function () {
              index++;
              if (index >= 3) {
                index = 0;
              }
              $(".title button")
                .eq(index)
                .addClass("active")
                .siblings()
                .removeClass("active");
              $(".content div").eq(index).show().siblings().hide();
            }, 1000);
          }
        );
      });
    </script>
  </body>
</html>
